<!DOCTYPE html>
<html>
  
<head>
  <meta charset="utf-8">
  <meta name="author" content="饿包子" />
  
  
  <title>前端面试题的收集和总结(Es6 篇) | 饿包子博客</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="面试合集," />
  

  
  <meta name="description" content="Es6的篇章">

  
  
    <link rel="icon" href="/blog/images/xian.ico">
    <link rel="apple-touch-icon" href="/blog/images/Logo.png">
  

  
<link rel="stylesheet" href="/blog/css/Awesome.min.css">


  
<link rel="stylesheet" href="/blog/css/index.css">
<link rel="stylesheet" href="/blog/styles/components/highlight/highlight.css">


  
  
<script src="/blog/common/jquery.min.js"></script>

  
    
<script src="/blog/common/Av.min.js"></script>

  

  
    
<script src="/blog/common/MathJax.js"></script>

  

  
    
<script src="/blog/common/Valine.min.js"></script>

  

  

  <script>
  // theme-ad's config script
  // it can be used in every script
  
  window.AD_CONFIG = {
    leancloud: {"appid":"gE1EosDsVgB2slV4E92yPkcG-gzGzoHsz","appkey":"niR787UVTMyJQrR6gmOiJCKe","comment":true,"count":true},
    welcome: {"enable":false,"interval":30},
    start_time: "2018-06-10",
    passwords: ["a621ab606db2a11f63edc576a729843b8269250dc324206871d90635ac5e531c", ],
    is_post: true,
    lock: false,
    author: "饿包子",
    share: {"twitter":false,"facebook":false,"weibo":true,"qq":true,"wechat":false},
    mathjax: true,
    page_type: "",
    root: "/blog/"
  };
</script>

  
<script src="/blog/vendor/sha256.min.js"></script>
<script src="/blog/js/auth.js"></script>
<script src="/blog/js/index.js"></script>
<script src="/blog/vendor/qrcode.min.js"></script>


<meta name="generator" content="Hexo 5.4.2"></head>
  <body>
    <header class="site-header">
  <div class="site-header-brand">
    
      <span class="site-header-brand-title">
        <a href="/blog/">清风逐月</a>
      </span>
    
    
      <span class="site-header-brand-motto"> | 我思故我在</span>
    
  </div>
  <div class="site-header-right">
    <nav class="site-header-navigation">
      
        <a href="/blog/" target="_self">主页</a>
      
        <a href="/blog/archives/" target="_self">归档</a>
      
        <a href="/blog/tags/" target="_self">标签</a>
      
        <a href="/blog/categories/" target="_self">分类</a>
      
        <a href="/blog/categories/%E6%97%A5%E8%AE%B0" target="_self">日记</a>
      
    </nav>
    <div class="site-header-btn">
      
        <a href="https://github.com/lixianbin1/" target="_blank" id="site-github">
          <i class="fa fa-github-alt"></i>
        </a>
      
      <a href="javascript:void(0);" id="site-search">
        <i class="fa fa-search"></i>
      </a>
      <a href="javascript:void(0);" id="site-nav-btn">
        <i class="fa fa-ellipsis-v"></i>
      </a>
    </div>
  </div>
</header>
<nav class="table-content" id="site-nav">
  <div class="table-content-title">
    <span>导航</span>
  </div>
  <div class="table-content-main">
    <ol class="toc">
      
        <li class="toc-item">
          <a href="/blog/" target="_self">
            主页
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/archives/" target="_self">
            归档
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/tags/" target="_self">
            标签
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/categories/" target="_self">
            分类
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/categories/%E6%97%A5%E8%AE%B0" target="_self">
            日记
          </a>
        </li>
      
    </ol>
  </div>
</nav>
<div id="site-process"></div>
    <main>
      
  <div class="passage">
  <div class="passage-meta">
    <span>
      <i class="fa fa-calendar"></i>2020-11-02
    </span>
    
      <span>
        | <a href="/blog/categories/%E9%9D%A2%E8%AF%95%E5%90%88%E9%9B%86/"><i class="fa fa-bookmark"></i>面试合集</a>
      </span>
    
    
      <span>
        | <i class="fa fa-unlock-alt"></i>UNLOCK
      </span>
    
    <span>
       | <i class="fa fa-calendar"></i>更新时间:2020-11-2 16:59 
    </span>
  </div>
  <h1 class="passage-title">
    前端面试题的收集和总结(Es6 篇)
  </h1>
  
  <article class="passage-article">
    <h3 id="ES6新增加了哪些新的东西？"><a href="#ES6新增加了哪些新的东西？" class="headerlink" title="ES6新增加了哪些新的东西？"></a>ES6新增加了哪些新的东西？</h3><p>ES6是ECMAScript2016的一个简称，也泛指ES5以后的版本，ES6新增的特性有 let const …(扩展运算符) ?.(可选链式操作) ; set map ; Symbol; Promise Generator async ;iterator for of ; class module ; proxy </p>
<h3 id="set-map-的区别？"><a href="#set-map-的区别？" class="headerlink" title="set map 的区别？"></a>set map 的区别？</h3><p>set和map都是Es6新增的数据结构，Set类似于数组，但是成员的值都是唯一的，没有重复的值。Set的属性方法有 size() add() delete() clear()；map是键值对的结构的补充，之前键仅限于字符串。而map数据结构则可以是各种类型的值。map的属性方法有 set() get() has() delete() clear();</p>
<h3 id="关于循环结构有哪些循环方法？"><a href="#关于循环结构有哪些循环方法？" class="headerlink" title="关于循环结构有哪些循环方法？"></a>关于循环结构有哪些循环方法？</h3><p>普通for循环；for in循环；for of循环(ES6新增) forEach() map() filter some reducer</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">for(var i=1;i&lt;arr.length;i++)&#123;  &#125;  //for循环，可以用来循环数组，iterator如set map</span><br><span class="line"></span><br><span class="line">for(let i in arr)&#123; console.log(arr[i]) &#125; //for in循环，可以用来循环数组，iterator 对象</span><br><span class="line"></span><br><span class="line">for(let i of arr)&#123; console.log(i) &#125; //for of循环，可以循环iterator如set map</span><br><span class="line"></span><br><span class="line">arr.forEach((i)=&gt; cosole.log(i) )   //forEach循环，可以循环数组，iterator</span><br><span class="line"></span><br><span class="line">arr.map((i)=&gt; console.log(i) )      //map循环，可以循环数组,iterator</span><br></pre></td></tr></table></figure>

<h3 id="怎么交换相等长度的两个数组？"><a href="#怎么交换相等长度的两个数组？" class="headerlink" title="怎么交换相等长度的两个数组？"></a>怎么交换相等长度的两个数组？</h3><p>通过结构赋值的变量交换可以实现，也可以声明一个额外的变量进行置换</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">let a=[1],b=[2];  [a,b]=[b,a];</span><br></pre></td></tr></table></figure>

<h3 id="Promise的三个状态是哪几个？"><a href="#Promise的三个状态是哪几个？" class="headerlink" title="Promise的三个状态是哪几个？"></a>Promise的三个状态是哪几个？</h3><p>promise是一个用于异步编程的一个解决方案，它的状态有 pending(进行中) fulfilled(已成功) rejected(已失败)；它有两个状态变化，一个是从pending到fulfilled，一个是从pending到rejected，一旦状态改变就不会在变</p>
<h3 id="怎么实现多个请求都成功后再处理回调？"><a href="#怎么实现多个请求都成功后再处理回调？" class="headerlink" title="怎么实现多个请求都成功后再处理回调？"></a>怎么实现多个请求都成功后再处理回调？</h3><p><strong>Promise.all([])</strong> 传递数组再赋值给一个变量，数组里都是promise实例,在数组里的promise，必须全部成功，状态才会变为fullfilled，只要有一个失败，则就算变为rejected，<br><strong>Promise.allSettled()</strong> 传递数组再赋值给一个变量，数组里都是promise实例,只要数组里的promise都有有返回，等所有异步都确定后会返回一个fullfilled状态的promise对象，且有各promise的状态</p>
<h3 id="怎么实现多个请求，只要成功一个就可以处理回调？"><a href="#怎么实现多个请求，只要成功一个就可以处理回调？" class="headerlink" title="怎么实现多个请求，只要成功一个就可以处理回调？"></a>怎么实现多个请求，只要成功一个就可以处理回调？</h3><p>可以通过Promise.rect() 方法实现，和.all()方法类似，都是往里面传递一个promise 实例数组，只要数组里有一个状态发送改变，那最外层的promise 就会接受到这个变化并且回调。</p>
<h3 id="实现的依次分段执行"><a href="#实现的依次分段执行" class="headerlink" title="实现的依次分段执行"></a>实现的依次分段执行</h3><p>Generator 是一个异步编程的解决方案，可以用于解决分段执行的方案；在声明函数的时候，在 function* 上添加星号，在函数内部通过 yield 来定义不同的内部状态；再通过next() 方法依次调用，直到 Generator 的 done 状态变为 true</p>
<h3 id="简单介绍一下-Async"><a href="#简单介绍一下-Async" class="headerlink" title="简单介绍一下 Async"></a>简单介绍一下 Async</h3><p><code>Async</code> 可以看做为 <code>Generator</code> 的语法糖; <code>await</code>后可以跟<code>Promise</code>或其他异步操作，只有异步操作执行才会继续执行；而且<code>Async</code> 会返回<code>Promise</code> 对象；<code>Promise</code>对象只有在<code>async</code>体内的异步操作都完成后才会改变状态，除非return 或者体内抛出异常</p>
  </article>
  <aside class="table-content" id="site-toc">
  <div class="table-content-title">
    <i class="fa fa-arrow-right fa-lg" id="site-toc-hide-btn"></i>
    <span>目录</span>
  </div>
  <div class="table-content-main">
    <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#ES6%E6%96%B0%E5%A2%9E%E5%8A%A0%E4%BA%86%E5%93%AA%E4%BA%9B%E6%96%B0%E7%9A%84%E4%B8%9C%E8%A5%BF%EF%BC%9F"><span class="toc-text">ES6新增加了哪些新的东西？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#set-map-%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">set map 的区别？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%B3%E4%BA%8E%E5%BE%AA%E7%8E%AF%E7%BB%93%E6%9E%84%E6%9C%89%E5%93%AA%E4%BA%9B%E5%BE%AA%E7%8E%AF%E6%96%B9%E6%B3%95%EF%BC%9F"><span class="toc-text">关于循环结构有哪些循环方法？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%80%8E%E4%B9%88%E4%BA%A4%E6%8D%A2%E7%9B%B8%E7%AD%89%E9%95%BF%E5%BA%A6%E7%9A%84%E4%B8%A4%E4%B8%AA%E6%95%B0%E7%BB%84%EF%BC%9F"><span class="toc-text">怎么交换相等长度的两个数组？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Promise%E7%9A%84%E4%B8%89%E4%B8%AA%E7%8A%B6%E6%80%81%E6%98%AF%E5%93%AA%E5%87%A0%E4%B8%AA%EF%BC%9F"><span class="toc-text">Promise的三个状态是哪几个？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%80%8E%E4%B9%88%E5%AE%9E%E7%8E%B0%E5%A4%9A%E4%B8%AA%E8%AF%B7%E6%B1%82%E9%83%BD%E6%88%90%E5%8A%9F%E5%90%8E%E5%86%8D%E5%A4%84%E7%90%86%E5%9B%9E%E8%B0%83%EF%BC%9F"><span class="toc-text">怎么实现多个请求都成功后再处理回调？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%80%8E%E4%B9%88%E5%AE%9E%E7%8E%B0%E5%A4%9A%E4%B8%AA%E8%AF%B7%E6%B1%82%EF%BC%8C%E5%8F%AA%E8%A6%81%E6%88%90%E5%8A%9F%E4%B8%80%E4%B8%AA%E5%B0%B1%E5%8F%AF%E4%BB%A5%E5%A4%84%E7%90%86%E5%9B%9E%E8%B0%83%EF%BC%9F"><span class="toc-text">怎么实现多个请求，只要成功一个就可以处理回调？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9E%E7%8E%B0%E7%9A%84%E4%BE%9D%E6%AC%A1%E5%88%86%E6%AE%B5%E6%89%A7%E8%A1%8C"><span class="toc-text">实现的依次分段执行</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AE%80%E5%8D%95%E4%BB%8B%E7%BB%8D%E4%B8%80%E4%B8%8B-Async"><span class="toc-text">简单介绍一下 Async</span></a></li></ol>
  </div>
</aside>

  
  
    <aside class="passage-copyright">
      <div>本文作者: 饿包子</div>
      
        <div>
          原文链接: 
          <a href="" target="_blank">https://lixianbin1.github.io/blog/2020/11/02/%E3%80%90%E9%9D%A2%E8%AF%95%E9%9B%86%E9%94%A6%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E7%9A%84%E6%94%B6%E9%9B%86%E5%92%8C%E6%80%BB%E7%BB%93(Es6%20%E7%AF%87)/</a>
        </div>
      
      <div>
        版权声明: 本博客所有文章除特别声明外, 均采用 <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> 许可协议. 转载请注明出处!
      </div>
    </aside>
  
  
</div>

    </main>
    
    
<div class="site-footer-wrapper">
<!--
  <div class="footer-top">
    <a class="left" href="/blog/2020/11/09/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E7%9A%84%E5%85%A5%E9%97%A8%E6%95%99%E5%AD%A6/" data-enable="true">
      <i class="fa fa-arrow-left"></i>
    </a>
    <a class="right" href="/blog/2020/10/29/%E3%80%90%E9%9D%A2%E8%AF%95%E9%9B%86%E9%94%A6%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E7%9A%84%E6%94%B6%E9%9B%86%E5%92%8C%E6%80%BB%E7%BB%93(React%20%E7%AF%87)/" data-enable="true">
      <i class="fa fa-arrow-right"></i>
    </a>
  </div>
-->
  <footer class="site-footer">
    
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">网站推荐</h5>
          
            <span class="site-footer-item">
              <a href="https://tympanus.net/codrops/" target="_blank">Codrops</a>
            </span>
          
            <span class="site-footer-item">
              <a href="http://taobaofed.org/" target="_blank">淘宝前端团队(FED)</a>
            </span>
          
        </div>
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">文档教程</h5>
          
            <span class="site-footer-item">
              <a href="https://es6.ruanyifeng.com/" target="_blank">ES6入门</a>
            </span>
          
            <span class="site-footer-item">
              <a href="https://developer.mozilla.org/zh-CN/docs/Web" target="_blank">MDN Web文档</a>
            </span>
          
        </div>
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">兴趣前沿</h5>
          
            <span class="site-footer-item">
              <a href="https://threejs.org/" target="_blank">threejs</a>
            </span>
          
            <span class="site-footer-item">
              <a href="https://github.com/justadudewhohacks/face-api.js" target="_blank">face-api</a>
            </span>
          
        </div>
      
    
    <div class="site-footer-info">
      <i class="fa fa-clock-o"></i> 本站已稳定运行<span id="site-time"></span>
    </div>
    
      <div class="site-footer-info">
        <i class="fa fa-paw"></i> 您是本站第 <span id="site-count"></span> 位访客
      </div>
    
    
      <div class="site-footer-info">
        <i class="fa fa-at"></i> Email: xianbin.me@qq.com
      </div>
    
<!--     <div class="site-footer-info">
      <i class="fa fa-copyright"></i> 
      2019 <a href="https://github.com/dongyuanxin/theme-ad/" target="_blank">Theme-AD</a>.
      Created by <a href="https://godbmw.com/" target="_blank">GodBMW</a>.
      All rights reserved.
    </div> -->
  </footer>
</div>
    <div id="site-layer" style="display:none;">
  <div class="site-layer-content">
    <div class="site-layer-header">
      <span class="site-layer-header-title" id="site-layer-title"></span>
      <i class="fa fa-close" id="site-layer-close"></i>
    </div>
    <div class="site-layer-body" id="site-layer-container">
      <div class="site-layer-input" id="site-layer-search" style="display: none;">
        <input type="text">
        <i class="fa fa-search"></i>
      </div>
      
        <div class="site-layer-reward" id="site-layer-reward" style="display: none;">
          
            <div>
              <img src="/blog/images/wechat.png" alt="WeChat">
              
                <p>WeChat</p>
              
            </div>
          
            <div>
              <img src="/blog/images/alipay.png" alt="AliPay">
              
                <p>AliPay</p>
              
            </div>
          
        </div>
      
      <div id="site-layer-welcome" style="display:none;"></div>
    </div>
  </div>
</div>
    

<div class="bottom-bar">

  <div class="bottom-bar-left">
<!--
    <a href="/blog/2020/11/09/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E7%9A%84%E5%85%A5%E9%97%A8%E6%95%99%E5%AD%A6/" data-enable="true">
      <i class="fa fa-arrow-left"></i>
    </a>
    <a href="/blog/2020/10/29/%E3%80%90%E9%9D%A2%E8%AF%95%E9%9B%86%E9%94%A6%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E7%9A%84%E6%94%B6%E9%9B%86%E5%92%8C%E6%80%BB%E7%BB%93(React%20%E7%AF%87)/" data-enable="true">
      <i class="fa fa-arrow-right"></i>
    </a>
-->
  </div>

  
  
  
  <div class="bottom-bar-right">
    <a href="javascript:void(0);" data-enable="true" id="site-toc-show-btn">
      <i class="fa fa-bars"></i>
    </a>
    
      <a href="#site-comment" data-enable="true">
        <i class="fa fa-commenting"></i>
      </a>
    
    <a href="javascript:void(0);" id="site-toggle-share-btn">
      <i class="fa fa-share-alt"></i>
    </a>
    
    <a href="javascript:void(0);" id="back-top-btn">
      <i class="fa fa-chevron-up"></i>
    </a>
  </div>
</div>
    <div id="share-btn">
  
  
  
    <a id="share-btn-weibo" href="javascript:void(0);" target="_blank">
      <i class="fa fa-weibo"></i>
    </a>
  
  
    <a id="share-btn-qq" href="javascript:void(0);" target="_blank">
      <i class="fa fa-qq"></i>
    </a>
  
  
</div>
    





    
  </body>
</html>